<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui"/>
<link rel="icon" href=""/>
<title>example</title>
<style type="text/css">
*,*:before,*:after{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
.mbody{
	width: 100%;
	max-width: 487px;
	margin: 0 auto;
  padding:0 15px;
}
.hd{
	text-align: center;
	font-size: 24px;
	margin-top: 20px;
	margin-bottom: 10px;
}
.nav-title{
	font-size: 18px;
	margin-top: 20px;
	margin-bottom: 10px;
}
.div{
	display: none;
}
.title{
	font-size: 14px;
	margin-top: 20px;
	margin-bottom: 10px;
}
.div > canvas,
.div > img{
	display: block;
	width: 100%;
	height: auto;
}
</style>
</head>

<body>
<div class="mbody">
	<h2 class="hd">参考案例</h2>
	<h3 class="nav-title">一、web-h5</h3>
	<div class="div" id="J_div-1">
		<h6 class="title">基础用法 ： 二维码(底部中间)海报<a href="./img/bg-zm.jpg" target="_blank">点击查看原图</a></h6>
	</div>
	<div class="div" id="J_div-2">
		<h6 class="title">高级用法 ： (商品列表)海报<a href="./img/tem.jpeg" target="_blank">点击查看模板</a></h6>
	</div>
  <h3 class="nav-title">二、uni-uniapp</h3>
  <h6 class="title">参考组件：uni-canvas</h6>
  <h3 class="nav-title">三、wx-微信小程序</h3>
  <h6 class="title">参考组件：wx-canvas</h6>
  <h3 class="nav-title">四、my-支付宝小程序</h3>
  <h6 class="title">参考组件：my-canvas</h6>
  <h3 class="nav-title">五、tt-头条小程序</h3>
  <h6 class="title">参考组件：tt-canvas</h6>
  <h3 class="nav-title">六、swan-百度小程序</h3>
  <h6 class="title">参考组件：swan-canvas</h6>
  <h3 class="nav-title">七、qq-qq小程序</h3>
  <h6 class="title">参考组件：qq-canvas</h6>
</div>
<script type="text/javascript" src="./model.js"></script>
<script type="text/javascript" src="../dist/web-canvas-poster-sprite.js"></script>
<script type="text/javascript">
window.onload = function(){
	 let CanvasPosterSprite = window.CanvasPosterSprite.default;//umd打包模式，模式导出__esModule模块

     //基本用法 - 二维码(底部中间)-海报
     new CanvasPosterSprite({
        width: 900,
        height: 1600,
        paths : {
          circle : [
            {
              x: 214,
              y: 1123,
              w: 56,
              h: 56,
              r: 28,
              type: "fill",
              color: "#ffffff"
            }
          ],
          rect : [
            {
              x: 324,
              y: 1209,
              w: 252,
              h: 252,
              type: "fill",
              color: "#e6e6e6"
            },
            {
              x: 325,
              y: 1210,
              w: 250,
              h: 250,
              type: "fill",
              color: "#ffffff"
            },
            {
              x: 206,
              y: 1117,
              w: 488,
              h: 68,
              r: 34,
              type: "fill",
              color: "rgba(0, 0, 0, .15)"
            },
            {
              x: 376.5,
              y: 1520.5,
              w: 152,
              h: 44,
              r: 22,
              lineWidth: 4,
              color: "#000000"
            }
          ],
          triangle : [
            {
              points : [
                {x: 450, y: 1198},
                {x: 462, y: 1185},
                {x: 439, y: 1185}
              ],
              type: "fill",
              color: "rgba(0, 0, 0, .15)"
            }
          ],
          line : [
            {
              x1: 360,
              y1: 1490.5,
              x2: 400,
              y2: 1490.5,
              lineWidth: 2,
              color: "#000000"
            },
            {
              x1: 505,
              y1: 1490.5,
              x2: 545,
              y2: 1490.5,
              lineWidth: 2,
              color: "#000000"
            }
          ]
        },
        pics : [
          {
            x: 0,
            y: 0,
            w: 900,
            h: 1600,
            preload: true,
            src: "./img/bg-zm.jpg"
          },
          {
            x: 328,
            y: 1213,
            w: 244,
            h: 244,
            src: "./img/qrcode-zm.png"
          },
          {
            x: 215,
            y: 1124,
            w: 54,
            h: 54,
            r: 27,
            src: "./img/icon.jpeg"
          }
        ],
        texts: [
          {
            x: 280,
            y: 1152,
            font: "26px 微软雅黑",
            color: "#FFE506",
            text: "小小咖侠侣店"
          },
          {
            x: 436,
            y: 1152,
            font: "26px 微软雅黑",
            color: "#ffffff",
            text: "邀请你注册侠侣联盟"
          },
          {
            x: 328,
            y: 1493,
            w: 250,
            font: "24px 微软雅黑",
            align: "center",
            color: "#000000",
            text: "邀 请 码"
          },
          {
            x: 328,
            y: 1543,
            w: 250,
            font: "28px Arail",
            align: "center",
            color: "#000000",
            text: "3ZGVTV"
          }
        ],
        // 也可以是：传参回调的方式，返回结果
        // callback:function(err, res){
        //   console.log(err, res);
        // }
     }).then(function(err, res){
          console.log("海报合成结果：", err, res);
          var oDiv = document.getElementById("J_div-1");
          if(err){
            // console.log("合成海报出错了：", err);

            //静态html，浏览器安全考虑:
            //SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement'
            if(res && res.canvas){
              // document.body.appendChild(res.canvas);
              oDiv.appendChild(res.canvas);
              oDiv.style.display = 'block';
            }
            return;
          }

          //导出base64
          var img = document.createElement("img");
          img.src = res.tempFilePath;
          // document.body.appendChild(img);
          oDiv.appendChild(img);
          oDiv.style.display = 'block';
     });
     
     //高级用法 - (商品列表)海报
     var param = getCanvasParam();
  	 new CanvasPosterSprite(param).then(function(err, res){
        console.log("海报合成结果：", err, res);
        var oDiv = document.getElementById("J_div-2");
        if(err){
          // console.log("合成海报出错了：", err);

          //静态html，浏览器安全考虑:
          //SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement'
          if(res && res.canvas){
            // document.body.appendChild(res.canvas);
            oDiv.appendChild(res.canvas);
            oDiv.style.display = 'block';
          }
          return;
        }

        //导出base64
        var img = document.createElement("img");
        img.src = res.tempFilePath;
        // document.body.appendChild(img);
        oDiv.appendChild(img);
        oDiv.style.display = 'block';
     });	
}
</script>
</body>

</html>
